import React from 'react';
import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import Map from '../components/Map';

const MapPage: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="h-screen flex flex-col bg-gray-50">
      {/* 顶部导航栏 */}
      <div className="bg-white shadow-sm border-b px-4 py-3 flex items-center space-x-4 z-10">
        <button
          onClick={() => navigate('/')}
          className="flex items-center space-x-2 text-gray-600 hover:text-gray-800 transition-colors"
        >
          <ArrowLeft size={20} />
          <span>返回首页</span>
        </button>
        <div className="flex-1">
          <h1 className="text-xl font-bold text-gray-800">南京景点地图</h1>
          <p className="text-sm text-gray-600">探索南京主要景点、美食和拍照点</p>
        </div>
      </div>

      {/* 地图容器 */}
      <div className="flex-1">
        <Map className="w-full h-full" />
      </div>
    </div>
  );
};

export default MapPage;